<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol4加载百度在线地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/gcoord.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>

    //+proj=longlat +ellps=GRS80 +no_defs

    const aa = [
        [120.28914554744506, 30.32810216827326],
        [120.28942754747735, 30.328094168687286],
        [120.28934354781178, 30.32751918384177],
        [120.28917054755946, 30.326328215202977],
        [120.28935954770539, 30.323694284980178],
        [120.28931554732446, 30.322223323762472],
        [120.28970454748696, 30.320444371199542],
        [120.29152054752933, 30.320648365901153],
        [120.29105554719888, 30.323556289115626],
        [120.29090454758611, 30.32554023663484],
        [120.29096854805849, 30.327367187589847],
        [120.29585054757293, 30.327606181850665],
        [120.29595754770305, 30.32755418310366],
        [120.29600454755882, 30.32356128899182],
        [120.29560154805105, 30.320388372807983],
        [120.29536654787441, 30.31912440580059],
        [120.29492354728536, 30.31556650007282],
        [120.29467554758824, 30.313570552985706],
        [120.29400954741644, 30.313263560769204],
        [120.29334554779265, 30.314149537474712],
        [120.29403454753076, 30.31445652924226],
        [120.29259254758215, 30.317460450196503],
        [120.29152054752933, 30.31959539368314],
        [120.2906095480334, 30.319192404222147],
        [120.291575547781, 30.31739445204491],
        [120.28922454798628, 30.317683443716188],
        [120.28839154740982, 30.317731442446192],
        [120.28739254805035, 30.317908438190013],
        [120.28757154725213, 30.31988938590519],
        [120.28766754751159, 30.32026537552163],
        [120.28760254721429, 30.320379373049377],
        [120.28364054741658, 30.320924358649254],
        [120.27838454780823, 30.321514342602],
        [120.27681254726502, 30.321690338186343],
        [120.27600054750329, 30.32179433567521],
        [120.27517254784804, 30.321901332409738],
        [120.27370154758712, 30.322090327327324],
        [120.27091554759923, 30.322448317890736],
        [120.26996954794316, 30.322570314467047],
        [120.2686845474551, 30.32276331004353],
        [120.26840554779584, 30.322887306811978],
        [120.26834654734631, 30.322970303892188],
        [120.26837754730848, 30.32318129846047],
        [120.2687075479196, 30.323922278901133],
        [120.26922454723024, 30.324393266980124],
        [120.26964754772786, 30.324660259893186],
        [120.27210754730253, 30.325947225839776],
        [120.27241854764713, 30.32625621760098],
        [120.27294354735368, 30.326565209162897],
        [120.27331254742462, 30.3267712040298],
        [120.2737045479601, 30.3267142051246],
        [120.2741575476966, 30.327100195076312],
        [120.27442154728728, 30.327714178682406],
        [120.27497054728327, 30.328214165509674],
        [120.27498854772493, 30.32840516034984],
        [120.27486954789921, 30.328498158205978],
        [120.2748975474883, 30.328602155445566],
        [120.27477554728956, 30.32870315265157],
        [120.2763425478099, 30.330626101564466],
        [120.27701354800463, 30.331241085758688],
        [120.27800854806446, 30.33168407407455],
        [120.27818254724343, 30.332035064624357],
        [120.27789654791148, 30.332204060085125],
        [120.27792754787359, 30.332823043661573],
        [120.27744654764963, 30.333112036337354],
        [120.27713354765521, 30.33360302264927],
        [120.2769145473721, 30.334075010873022],
        [120.2759895476324, 30.336068957780185],
        [120.27534554720182, 30.337709914239205],
        [120.27492854745027, 30.33949686740333],
        [120.27488054776968, 30.339702861427664],
        [120.27432254755283, 30.33971086161587],
        [120.27415954734624, 30.3398118589937],
        [120.27368954789127, 30.340530839840874],
        [120.27358454741093, 30.340521839607604],
        [120.27311954797885, 30.340260847211315],
        [120.27129254806577, 30.33923587382484],
        [120.27077954805482, 30.33894888164847],
        [120.26868454745482, 30.33762891675282],
        [120.26708454732257, 30.33662194335755],
        [120.26221254785388, 30.333914014650755],
        [120.26221254785388, 30.333827016818127],
        [120.26273954721027, 30.333124035488574],
        [120.26366954787116, 30.33145007993377],
        [120.2637285474224, 30.331214086370622],
        [120.2636575472772, 30.33117208696373],
        [120.2624355474367, 30.330479105780054],
        [120.26144854777282, 30.330016117706663],
        [120.2612195474439, 30.32984012234936],
        [120.26131254733035, 30.32962612827338],
        [120.26124354773337, 30.329545130303053],
        [120.2602395474527, 30.32897514582178],
        [120.25935854719569, 30.330167114281828],
        [120.25933954782737, 30.330205113249786],
        [120.25877254738978, 30.33131908325815],
        [120.25861554792918, 30.33166307447356],
        [120.25834354794262, 30.331811070232188],
        [120.25731454754757, 30.332708046467054],
        [120.25683654769666, 30.333916015009812],
        [120.25698254728654, 30.334182007372366],
        [120.25695354787257, 30.33431700402132],
        [120.25682154762804, 30.334398001921432],
        [120.2564735474735, 30.33431300409457],
        [120.25627654783001, 30.33438900189959],
        [120.25623154762415, 30.334730992842836],
        [120.25515254789875, 30.336370949862854],
        [120.25440654736092, 30.336708941032413],
        [120.2539855474114, 30.337423921609137],
        [120.25433354756593, 30.33769991438032],
        [120.25429854740585, 30.338017905963145],
        [120.25550554807612, 30.338480894192227],
        [120.25625354736542, 30.338861883637346],
        [120.2583425472193, 30.34023584743929],
        [120.25841254753946, 30.340471840966178],
        [120.25829154806395, 30.340958828704366],
        [120.25784654782501, 30.341417816567862],
        [120.2575285478077, 30.341543813179033],
        [120.25728554723513, 30.34144381536503],
        [120.25724454722724, 30.341216821250473],
        [120.25710454748518, 30.34111182412267],
        [120.25570554719432, 30.340671836152016],
        [120.25512654795938, 30.34059183812667],
        [120.25297054726002, 30.34132281914478],
        [120.25200254786266, 30.341410816622044],
        [120.25149854807255, 30.34131281888014],
        [120.25083654720028, 30.340998827575035],
        [120.25056654776189, 30.340684836037973],
        [120.24991554765866, 30.340489840665697],
        [120.24881254764377, 30.34001985336429],
        [120.24799754750894, 30.341601811305903],
        [120.2475295477038, 30.342308792610982],
        [120.2464605480241, 30.342528786653325],
        [120.24495254795333, 30.342237794449225],
        [120.24166654747494, 30.341603811507877],
        [120.2402445476178, 30.341329818321146],
        [120.2393035479846, 30.342755780826337],
        [120.2386625479271, 30.343924750308094],
        [120.23752054755411, 30.344704729230052],
        [120.23665254771589, 30.34550570787516],
        [120.23629554734049, 30.345360712073834],
        [120.23377354784162, 30.344342739107425],
        [120.23176954747827, 30.3435337603729],
        [120.23086854802801, 30.343334765690802],
        [120.22988054764086, 30.343003773971162],
        [120.22869354796042, 30.343742754667634],
        [120.22850854801253, 30.343808752895665],
        [120.22836554789734, 30.3438597514607],
        [120.22820054804093, 30.34391774976615],
        [120.22788854787137, 30.344140744293984],
        [120.22749354786117, 30.34504672057414],
        [120.22749054748812, 30.345244714812775],
        [120.22829554757712, 30.345615705241435],
        [120.2347145474747, 30.348710623600667],
        [120.23633154732546, 30.349580600292192],
        [120.23714854800838, 30.350172584495116],
        [120.23856954804053, 30.351529548448624],
        [120.24022554735105, 30.35361249373607],
        [120.24050754738333, 30.353993483194454],
        [120.24050354808365, 30.354520469862713],
        [120.24007254719014, 30.354939458330367],
        [120.23991654755453, 30.355309448477175],
        [120.23967554753004, 30.356162426222937],
        [120.23960354756002, 30.357684385946147],
        [120.23949954780294, 30.358265370714594],
        [120.23881554718936, 30.360092321774072],
        [120.23858454721069, 30.360495311105197],
        [120.23861654789606, 30.360647307078974],
        [120.23873554772176, 30.360728304892994],
        [120.23969254724841, 30.361032297430402],
        [120.2421105478886, 30.361861275104125],
        [120.24306254739237, 30.362120268243267],
        [120.24324454786559, 30.362256265003456],
        [120.24321354790345, 30.362715252963817],
        [120.24652354777291, 30.366648148305217],
        [120.24693854787462, 30.367054138049635],
        [120.24742554794634, 30.36708613682984],
        [120.24905854769062, 30.365968166795952],
        [120.2491425473562, 30.366011165074845],
        [120.25025054739396, 30.367308131421854],
        [120.25040354755482, 30.367591123241898],
        [120.25074054783869, 30.367715120585633],
        [120.2511695472858, 30.36801111213402],
        [120.2515565477984, 30.368344103395735],
        [120.25219954750577, 30.36901108621357],
        [120.2537875479425, 30.370418048906707],
        [120.25649754776235, 30.373660962981287],
        [120.2591585480767, 30.37669688271786],
        [120.26187554756922, 30.3799957954002],
        [120.2645245472897, 30.38321170970987],
        [120.26748554807803, 30.386914611919526],
        [120.27173554775572, 30.392020476584698],
        [120.27401054738242, 30.39487040071452],
        [120.27546854722452, 30.39664735410141],
        [120.27649754761953, 30.397832322729364],
        [120.27958254735806, 30.403008185779992],
        [120.27972654729813, 30.40279519085079],
        [120.2805205475165, 30.40132022997906],
        [120.28060354735719, 30.400839243019263],
        [120.28107954755825, 30.399787270844158],
        [120.28118554786347, 30.399226285976976],
        [120.28110054747471, 30.399065290056228],
        [120.28042854745505, 30.39883129592106],
        [120.28050554744797, 30.398704299210422],
        [120.27962454719093, 30.398297310463548],
        [120.28064454736517, 30.395994371414734],
        [120.28099954719242, 30.396067369159653],
        [120.28261154791868, 30.392854454391514],
        [120.2830515472364, 30.39296745147417],
        [120.28371254738546, 30.3915754879687],
        [120.28605254730948, 30.39219547209292],
        [120.28620554747039, 30.391774482914478],
        [120.28827554795598, 30.392180472136104],
        [120.28840654747722, 30.392000477122895],
        [120.28915554748973, 30.392019476224796],
        [120.28941754743065, 30.391725484488763],
        [120.29124054804399, 30.39198447755025],
        [120.29198854733336, 30.39187648036545],
        [120.29185054724108, 30.39126049646474],
        [120.29108954753303, 30.388156578846427],
        [120.2905305474913, 30.386090633341503],
        [120.29032154725394, 30.385259655656018],
        [120.2899435478606, 30.378276840258778],
        [120.28991754792136, 30.37779785322552],
        [120.28974654731887, 30.37478993311692],
        [120.2896585474553, 30.373254973544288],
        [120.28956654739386, 30.37163801609243],
        [120.28956654739386, 30.371389022875213],
        [120.28956754721888, 30.36552717834616],
        [120.28951154804072, 30.3646782003377],
        [120.28987154789087, 30.360065322594462],
        [120.28994454768582, 30.35995532596862],
        [120.29016554761876, 30.359968325618606],
        [120.29094854796648, 30.360341315852775],
        [120.29100954806584, 30.36043331291578],
        [120.29097854720537, 30.36061830823914],
        [120.29160054789463, 30.360998298415478],
        [120.29185554726446, 30.361153294086538],
        [120.2933065474338, 30.361726278466644],
        [120.29609654761967, 30.362395261241932],
        [120.29652354741697, 30.362377261695777],
        [120.29656054722689, 30.36217126734271],
        [120.29667754740277, 30.36045831217868],
        [120.29702054753447, 30.359385341049318],
        [120.29693654786885, 30.35926234391683],
        [120.297585547424, 30.358193372572323],
        [120.29765754739407, 30.357814382287064],
        [120.29763054762985, 30.35748439142137],
        [120.29811654787667, 30.356642413771436],
        [120.29812754774734, 30.356153426653663],
        [120.29767454801086, 30.354896459836826],
        [120.29926254754929, 30.35471746434753],
        [120.29932154799887, 30.353877486865898],
        [120.29959154743729, 30.35293751145102],
        [120.29990154795702, 30.35288151303636],
        [120.29991054727952, 30.35249452318554],
        [120.29981054772043, 30.35231952791935],
        [120.29981654756823, 30.351483550006662],
        [120.29659654721209, 30.350214583504524],
        [120.29671654776102, 30.34964659846132],
        [120.29677354766243, 30.348715622969344],
        [120.2968385479598, 30.34766465105324],
        [120.29700554746607, 30.34716666440833],
        [120.29733554807727, 30.346733675312027],
        [120.29731454726256, 30.346465682839415],
        [120.29660954763094, 30.34579870056009],
        [120.29530954797262, 30.34429674038841],
        [120.29416254757686, 30.34211079786161],
        [120.29359054801465, 30.34051984015918],
        [120.29340054804382, 30.340425842753135],
        [120.29308954769917, 30.340033852680108],
        [120.2922715471914, 30.338134903397382],
        [120.29209754801244, 30.33773091409387],
        [120.29123254764899, 30.335099983242266],
        [120.29083154779109, 30.334124009502485],
        [120.29057954789599, 30.333277031521437],
        [120.28970354766187, 30.33034110939544],
        [120.2894435473709, 30.329467132166336],
        [120.28931154802473, 30.329024143902],
        [120.28914554744506, 30.32810216827326]
    ];

    const projectionBD09 = new ol.proj.Projection({
        code: 'BD:09',
        extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
        units: 'm',
        axisOrientation: 'enu',
        global: false
    });
    ol.proj.addProjection(projectionBD09);

    const projectionExtentInBD09 = projectionBD09.getExtent();
    // debugger
    let resolutions = [];
    const maxZoom = 19;
    const minZoom = 0;
    // 计算百度使用的分辨率
    for (let i = minZoom; i <= maxZoom; i++) {
        resolutions[i] = 0.5 * Math.pow(2, maxZoom - i);
    }
    /*let earthRadius = 6378137;
    for (let i = minZoom; i <= maxZoom; i++) {
        resolutions[i] = (2 * Math.PI * earthRadius) / (256 * Math.pow(2, i));
    }*/
    // resolutions[19] = 0.5;
    console.log(resolutions.length, resolutions);

    const tileGrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
        extent: projectionExtentInBD09
    });

    const baiduSource = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord, projection) => {
            // console.log(projection);
            let [z, x, y] = tileCoord;
            // debugger
            // y = -y - 1;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
            return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
            // return `http://maponline1.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210408`;
        }
    });
    // 百度地图层
    const baiduMapLayer = new ol.layer.Tile({
        source: baiduSource
    });

    /*const baiduSource1 = new ol.source.TileImage({
        projection: 'BD:09',
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord) => {
            let [z, x, y] = tileCoord;
            // debugger
            // y = -y - 1;
            // 百度瓦片服务url将负数使用M前缀来标识
            // return `http://shangetu1.map.bdimg.com/it/u=x=${x};y=${y};z=${z};v=009;type=sate&fm=46&udt=20210407`;
            return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
            // return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210407`;
            // return `http://maponline1.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=sl&udt=20210408`;
        }
    });
    // 百度地图层
    const baiduMapLayer1 = new ol.layer.Tile({
        source: baiduSource1
    });*/

    // const centerPoint = [120.01245975494385, 30.285433530807495]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]
    // const centerPoint = [110.00686213, 40.57757939];
    const centerPoint = [120.01245975494385, 30.285433530807495];

    // const circlePoint = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');
    const circlePoint = gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC);
    // const bd09P = aa.map(item => {
    //     return ol.proj.transform(item, 'EPSG:4326', 'BD:09');
    // });
    //
    // const pp = bd09P.map(item=>{
    //     return mercatorToLngLat(item)
    // })
    // console.log(pp, '====');

    // const

    console.log(circlePoint);

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    /*const centerPoint1 = [116.454867, 39.897007];
    const circlePoint1 = ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09');
    const iconFeature1 = new ol.Feature({
        geometry: new ol.geom.Point(circlePoint1)
    });

    const iconStyle1 = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature1.setStyle(iconStyle1);

    const vectorSource1 = new ol.source.Vector({
        features: [iconFeature1]
    });

    const iconLayer1 = new ol.layer.Vector({
        source: vectorSource1
    });*/

    const map = new ol.Map({
        layers: [
            baiduMapLayer,
            // baiduMapLayer1,
            iconLayer
            // iconLayer1
        ],
        target: 'map',
        view: new ol.View({
            center: gcoord.transform(centerPoint, gcoord.WGS84, gcoord.BD09MC),
            projection: 'BD:09',
            zoom: 3,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        })
    });

    // console.log(ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'));
    // console.log(ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09'));

    /*setTimeout(() => {
        map.getView().animate({
            center: ol.proj.transform(centerPoint1, 'EPSG:4326', 'BD:09'),
            duration:300
        }, 300);
    }, 2000);

    setTimeout(() => {
        map.getView().animate({
            center: ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'),
            duration:300
        }, 300);
    }, 4000);*/
</script>
</html>
